<template>
  <div>
    <div style="width: 430px; float: right">
      <el-input @keyup.enter.native="searchEnterFun($event)" placeholder="请输入知识名称" v-model="name">
        <i class="el-input__icon el-icon-search" slot="prefix"></i>
        <el-button :icon="appendIcon" slot="append" v-on:click="switchAppend"></el-button>
      </el-input>
    </div>
    <div id="advance" style="padding: 10px;float: right" v-if="showAdvance">
      <div class="block" style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">失败原因</div>
        <el-select placeholder="请选择" size="small" style="width: 300px" v-model="kind">
          <el-option
            :key="item.value"
            :label="item.label"
            :value="item.value"
            v-for="item in kinds">
          </el-option>
        </el-select>
      </div>
      <div class="block" style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">推送平台</div>
        <el-select placeholder="请选择" size="small" style="width: 300px" v-model="platformId">
          <el-option
            :key="items.value"
            :label="items.label"
            :value="items.value"
            v-for="items in platforms"
          >
          </el-option>
        </el-select>
      </div>
      <div class="block" style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">操作时间</div>
        <div class="block" style="display: inline-block;">
          <el-date-picker
            @change="dateChange"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            size="small"
            start-placeholder="开始日期"
            style="width: 300px;" type="datetimerange"
            v-model="operatedTime" value-format=" yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </div>
      </div>
      <div style="margin-top: 20px; right: 10px;">
        <el-row>
          <el-col :offset="7" :span="6">
            <div style="margin-left: 70px;height: 32px; width: 10px;">
              <el-button size="small" v-on:click="advanceCancel">取 消</el-button>
            </div>
          </el-col>
          <el-col :offset="2" :span="2">
            <div style="height: 32px; width: 88px">
              <el-button size="small" v-on:click="replacement">重置</el-button>
            </div>
          </el-col>
          <el-col :offset="2" :span="1">
            <div div style="margin-left: 10px;height: 32px; width: 88px">
              <el-button size="small" type="success" v-on:click="advanceConfirm">确 定</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "SyncFailureSearch",
    data() {
      return {
        currentPage: 0, // 第几页
        pageNum: 10, // 每页显示的数据个数
        show: "true",
        noData: false,
        showAdvance: false,
        appendIcon: "el-icon-caret-bottom",
        searchData: [],
        name: '',
        kinds: [{
          value: 0,
          label: '推送失败'
        }, {
          value: 1,
          label: '消费失败'
        }],
        kind: '',
        platforms: [],
        platformId: '',
        operatedTime: '',
      }
    },
    methods: {
      dateChange(val) {
        this.operatedTime = val;
        if (val == null) {
          this.operatedTime = ''
        }
      },
      searchEnterFun(e) {
        const keyCode = window.event ? e.keyCode : e.which;
        if (keyCode === 13) {
          this.confirm()
        }
      },
      advanceCancel: function () {
        this.showAdvance = false;
      },
      advanceConfirm: function () {
        this.confirm()
      },
      replacement: function () {
        this.name = ''
        this.kind = ''
        this.platformId = ''
        this.operatedTime = ''
      },
      switchAppend: function () {
        if (this.showAdvance) {
          this.showAdvance = false;
          this.appendIcon = "el-icon-caret-bottom";
        } else {
          this.showAdvance = true;
          this.appendIcon = "el-icon-caret-top";
        }
      },
      confirm: function () {
        this.axios.get('/pmph/action/medicalCalculator/selectSyncFailure', {
          params: {
            currentPage: this.currentPage,
            pageNum: this.pageNum,
            name: this.name,
            kind: this.kind,
            platformId: this.platformId,
            operatedTime: this.operatedTime.toString(),
          }
        }).then((response) => {
          this.noData = response.data.totalNum <= 0;
          this.searchData = response.data.tableData;
          this.totalNum = response.data.totalNum;
          this.$emit('confirm', this.searchData, this.totalNum, this.name, this.kind, this.platformId, this.operatedTime)
        }).catch((error) => {
          console.error(error);
          this.tableData = [];
          this.noData = true;
          this.$message.error("未能请求到数据");
        })
      }
    },
    created() {
      this.axios.get("/pmph/action/medicalCalculator/selectPlatform", {})
        .then((response) => {
          console.log(response)
          this.platforms = response.data
        })
        .catch((error) => {
          this.$message.error("获取名称失败")
        })
    }
  }
</script>

<style scoped>

</style>
